<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<html:header title="日常收支">
    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">
    <script src="${baseUrl}js/myEchart.js" charset="utf-8"></script>

    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .layui-bg-number {background-color:#F8F8F8;}
    </style>
    <script>

        jQuery(function () {
            ajaxSelect("${baseUrl}organization/store/getStores.action","storeId","全部");

            get("${baseUrl}account/getUserCompany.action",function (res) {
                if (!emptyEntity(res.data)) {
                    $("#companyName").html(res.data.name);
                }
            });
        });


        layui.use(['form', 'layedit', 'laydate','element','echarts'], function(){
            var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate
                ,echarts = layui.echarts
                ,element = layui.element;



            element.on('tab(dateTab)', function(){
                $('[name="flag"]').val(this.getAttribute('lay-id'));
                loadView();
            });

            laydate.render({
                elem: '#day',
                btns: ['now', 'confirm'],
                value: new Date(),
                done: function(value, date, endDate){
                    setTimeout(function () {
                        loadView();
                    },20);
                }
            });

            laydate.render({
                type:'month',
                elem: '#month',
                btns: ['now', 'confirm'],
                value: new Date(),
                done: function(value, date, endDate){
                    setTimeout(function () {
                        loadView();
                    },20);
                }
            });

            laydate.render({
                type:'year',
                elem: '#year',
                btns: ['now', 'confirm'],
                value: new Date(),
                done: function(value, date, endDate){
                    setTimeout(function () {
                        loadView();
                    },20);
                }
            });

            form.on('select(storeId)', function(data){
                loadView();
            });


            loadView();

            window.sale_trend_chat = echarts.init(document.getElementById('sale-trend'), 'walden');
            window.chart_balance = echarts.init(document.getElementById('chart-balance'), 'walden');
            window.chart_user = echarts.init(document.getElementById('chart-user'), 'walden');
            window.chart_custom = echarts.init(document.getElementById('chart-custom'), 'walden');

            window.onresize = function () {
                window.sale_trend_chat.resize();
                window.chart_balance.resize();
                window.chart_user.resize();
                window.chart_custom.resize();
            };

            function loadView(){
                let json = getFormJson($("#form"));
                if (json.flag == 'day') {
                    $(".sevenDay").show();
                } else {
                    $(".sevenDay").hide();
                }

                get("${baseUrl}financeCount/operateAnalysis/getTrend.action"+genParam(getFormJson($("#form"))), function (res) {
                    if (!emptyEntity(res.data)) {
                        window.sale_trend_chat.setOption(genNChatLineOption(res.data.labels, res.data.xData, res.data.series));
                        $("#saleAmount").html(getPrice(res.data.amount));
                        $("#saleProfits").html(getPrice(res.data.profits));
                        $("#saleNumber").html(getNumber(res.data.number));

                        $("#avgAmount").html(getPrice(res.data.avgAmount));
                        $("#avgProfits").html(getPrice(res.data.avgProfits));
                        $("#avgNumber").html(getNumber(res.data.avgNumber));
                    }
                });


                get("${baseUrl}financeCount/profitAnalysis/profitsData.action"+genParam(genParamWithDate()), function (res) {
                    if (res.code == 1) {
                        $("#profits").html(getPrice(res.data.profits));
                        $("#inAmt").html(getPrice(res.data.inAmt));
                        $("#outAmt").html(getPrice(res.data.outAmt));
                    }
                });

                get("${baseUrl}settAccount/settAccount/listVo.action", function (res) {
                    if (!emptyList(res.data)) {
                        let total=0;
                        $.each(res.data, function (i,d) {
                            total+= parseFloat(d.balance);
                        });
                        $("#total-balance").html(getPrice(total));


                        $("#chart-balance").css("display","block");
                        $("#chart-balance").next().css("display","none");
                        window.chart_balance.setOption(genChatRatioOption(genBalanceChatRatioData('余额', res.data)));
                    } else {
                        $("#chart-balance").css("display","none");
                        $("#chart-balance").next().css("display","block");
                    }
                });

                get("${baseUrl}financeCount/performanceAnalysis/listUserData.action"+genParam(genParamWithDate())+"&filterZero=true", function (res) {
                    if (!emptyList(res.data)) {
                        $("#chart-user").css("display","block");
                        $("#chart-user").next().css("display","none");

                        $("#topSale").html(res.data[0].name);
                        $("#topSaleAmount").html(getPrice(res.data[0].amount));

                        let data = {};
                        data.labels = ['销售额','毛利'];
                        data.names = [];
                        let amount_list = [];
                        let profits_list = [];
                        $.each(res.data,function (i,d) {
                            data.names.push(d.name);
                            amount_list.push(d.amount);
                            profits_list.push(d.profits);
                        });

                        data.series = [];
                        data.series.push({
                            name:'销售额',
                            type:'bar',
                            data:amount_list
                        });
                        data.series.push({
                            name:'毛利',
                            type:'bar',
                            data:profits_list
                        });


                        window.chart_user.setOption(genNChatRankOption(data));
                    } else {
                        $("#chart-user").css("display","none");
                        $("#chart-user").next().css("display","block");

                        $("#topSale").html("无");
                        $("#topSaleAmount").html(getPrice(0));
                    }
                });

                get("${baseUrl}goodsCount/saleAnalysis/listCustomData.action"+genParam(genParamWithDate())+"&filterZero=true", function (res) {
                    if (!emptyList(res.data)) {
                        $("#chart-custom").css("display","block");
                        $("#chart-custom").next().css("display","none");
                        window.chart_custom.setOption(genChatRatioOption(genChatRatioData('销售额','amount', res.data)));
                    } else {
                        $("#chart-custom").css("display","none");
                        $("#chart-custom").next().css("display","block");
                    }
                });
            }

            function genParamWithDate() {
                let json = getFormJson($("#form"));
                if (json.flag == "day") {
                    json.date1 = json.day;
                    json.date2 = json.day;
                } else if (json.flag == "month") {
                    var timearr = json.month.split("-");
                    var endDate = laydate.getEndDate(timearr[1], timearr[0]);
                    json.date1 = json.month + "-01";
                    json.date2 = json.month + "-" + endDate;
                } else {
                    json.date1 = json.year + "-01-01";
                    json.date2 = json.year + "-12-31";
                }

                return json;
            }

            $("#open-performance-page").click(function () {
                openTab("业绩报表","${baseUrl}financeCount/performanceAnalysis.action"+genParam(genParamWithDate()));
            });


            $("#open-balance-page").click(function () {
                openTab("结算账户","${baseUrl}settAccount/settAccount.action");
            });


            $("#open-saleCustom-page").click(function () {
                openTab("销售报表","${baseUrl}goodsCount/saleAnalysis.action"+genParam(genParamWithDate()));
            });
        });
    </script>
</html:header>
<body style="height: 100%;" scrolling="no">

<form class="layui-form layui-form-pane" action="" id="form">
    <input type="hidden" name="flag" value="day">

    <div class="layui-form-item" style="margin-bottom: 0px;">
        <div class="layui-inline" style="margin-bottom: 0px;">
            <label class="layui-form-label">门店</label>
            <div class="layui-input-inline">
                <select name="storeId" lay-filter="storeId"></select>
            </div>
        </div>
    </div>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-tab layui-tab-brief" lay-filter="dateTab">
            <ul class="layui-tab-title">
                <li lay-id="day" class="layui-this">日报</li>
                <li lay-id="month">月报</li>
                <li lay-id="year">年报</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">日期</label>
                            <div class="layui-input-inline">
                                <input type="text" id="day" name="day" placeholder="请选择日期" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">日期</label>
                            <div class="layui-input-inline">
                                <input type="text" id="month" name="month" placeholder="请选择日期" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">日期</label>
                            <div class="layui-input-inline">
                                <input type="text" id="year" name="year" placeholder="请选择日期" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">
                <div class="w100 fontB font16 fontDeepBlue">
                    <span id="companyName"></span>
                    <span class="pdl4">经营报告</span>
                </div>
            </div>
            <div class="layui-card-body">
                <div class="w100">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-xs6 layui-col-sm4 layui-col-md2">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <h5>销售额</h5>
                                    </div>
                                    <div class="panel-content">
                                        <span class="fontB fontRed font24" id="saleAmount">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm4 layui-col-md2">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <h5>销售毛利</h5>
                                    </div>
                                    <div class="panel-content">
                                        <span class="fontB fontRed font24" id="saleProfits">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm4 layui-col-md2">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <h5>销售笔数</h5>
                                    </div>
                                    <div class="panel-content">
                                        <span class="fontB fontDeepBlue font24" id="saleNumber">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-xs6 layui-col-sm4 layui-col-md2">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <h5>
                                            <span class="sevenDay">近7天</span>日均销售额
                                        </h5>
                                    </div>
                                    <div class="panel-content">
                                        <span class=" fontB fontDeepBlue font24" id="avgAmount">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm4 layui-col-md2">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <h5>
                                            <span class="sevenDay">近7天</span>日均毛利
                                        </h5>
                                    </div>
                                    <div class="panel-content">
                                        <span class=" fontB fontDeepBlue font24" id="avgProfits">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-xs6 layui-col-sm4 layui-col-md2">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <h5>
                                            <span class="sevenDay">近7天</span>日均销售笔数
                                        </h5>
                                    </div>
                                    <div class="panel-content">
                                        <span class=" fontB fontDeepBlue font24" id="avgNumber">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header fontB font14 fontDeepBlue">
                销售走势
            </div>
            <div class="layui-card-body">
                <div id="sale-trend" class="h300"></div>
            </div>
        </div>

        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header w100 fontB font14 fontDeepBlue">
                        利润
                    </div>
                    <div class="layui-card-body h200">
                        <table border="0" class="w100 h100">
                            <tbody>
                            <tr>
                                <td colspan="2" align="center" class="borderB-light">
                                    <span class="font14 fontC666">利润</span><br>
                                    <span id="profits" class="font24 fontB fontGreen">0</span>
                                    <span class="font14 fontGreen">元</span>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" class="borderR-light">
                                    <span class="font14 fontC666">收入</span><br>
                                    <span id="inAmt" class="font24 fontB fontDeepBlue">0</span>
                                    <span class="font14 fontDeepBlue">元</span>
                                </td>

                                <td align="center">
                                    <span class="font14 fontC666" >支出</span><br>
                                    <span id="outAmt" class="font24 fontB fontDeepBlue">0</span>
                                    <span class="font14 fontDeepBlue">元</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="layui-col-xs12 layui-col-sm8 layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header w100">
                        <div class="layui-row">
                            <div class="layui-col-xs6 fontB font14 fontDeepBlue" style="text-align: left">
                                账户总余额
                                <a id="open-balance-page" class="fontC999 pdl4">查看更多</a>
                            </div>
                            <div class="layui-col-xs6 fontB font14 fontDeepBlue pdr20" style="text-align: right">
                                <span class="font20" id="total-balance">0.00</span>
                                <span>元</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div id="chart-balance" class="h200"></div>
                            <div class="h200 lh200 font20 fontB fontC_ccc" style="text-align: center;display: none;">
                                统计值为0或负数无法统计
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card mt20">
            <div class="layui-card-header w100 fontB font14 fontDeepBlue">
                员工销售情况
            </div>
            <div class="layui-card-body">

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-xs12 layui-col-sm8 layui-col-md9">
                        <div id="chart-user" class="h300"></div>
                        <div class="h300 lh300 font20 fontB fontC_ccc" style="text-align: center;display: none;">
                            统计值为0或负数无法统计
                        </div>
                    </div>

                    <div class="layui-col-xs12 layui-col-sm4 layui-col-md3 border-light h300 pdl20">
                        <span class="fontC666">销售冠军</span><br>
                        <span id="topSale" class="font24 fontB fontDeepBlue">无</span><br>
                        <span class="fontC666">销售额</span><br>
                        <span id="topSaleAmount" class="font24 fontB fontDeepBlue">0.00</span>
                        <span class="fontC666">元</span>

                        <div style="width: 150px; height: 150px;margin: 0 auto">
                            <img src="${baseUrl}images/winner.png" style="width: 150px;height: 150px;">
                        </div>

                        <div class="w100" style="text-align: right">
                            <a id="open-performance-page" class="fontC999 pdl4">查看更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-card">
            <div class="layui-card-header w100">
                <div class="layui-row">
                    <div class="layui-col-xs6 fontB font14 fontDeepBlue" style="text-align: left">
                        客户销售分布
                        <a id="open-saleCustom-page" class="fontC999 pdl4">查看更多</a>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <div id="chart-custom" class="h400"></div>
                <div class="h400 lh400 font20 fontB fontC_ccc" style="text-align: center;display: none;">
                    统计值为0或负数无法统计
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

</form>
</body>
</html>